<template>
  <div>
    <PageLayout>
      <template #searchForm>
        <n-form
            style="margin-bottom: -24px"
            label-placement="left"
            label-align="right"
            :show-label="false"
            ref="searchFormRef"
            inline
            :model="searchForm"
        >
          <n-select
              v-model:value="searchForm.status"
              :options="searchOptions.status"
              clearable
              style="width: 120px; margin-right: 8px"
          />
          <n-select
              v-model:value="searchForm.type"
              :options="searchOptions.type"
              clearable
              style="width: 120px; margin-right: 8px"
          />
          <n-form-item path="keywords">
            <n-input v-model:value="searchForm.keywords"/>
          </n-form-item>
          <n-form-item>
            <n-space>
              <n-button attr-type="button" type="primary" @click="handleQuery">查询/刷新</n-button>
            </n-space>
          </n-form-item>
        </n-form>
      </template>
      <template #btnBar>
        <n-button type="primary" @click="pageNav.add()">
          <template #icon>
            <n-icon>
              <component :is="'antd-PlusOutlined'"></component>
            </n-icon>
          </template>
          新增
        </n-button>
      </template>
      <n-data-table
          :columns="columns"
          :data="listData"
          :single-line="false"
          :row-key="(row: any) => {return row.id}"
      />
      <Pagination
          :total="paginationReactive.total"
          :page="paginationReactive.page"
          :limit="paginationReactive.size"
          @pagination="getListData"
      />
    </PageLayout>
    <n-modal
        v-model:show="pageNav.show" preset="dialog"
        :title="(formItem.id !== 0 ? '编辑' : '新增') + '应用'"
        style="width: 680px"
    >
      <n-form
          ref="formAddRef"
          :model="formItem"
          :rules="formRules"
          label-placement="left"
          :label-width="120"
          require-mark-placement="right-hanging"
          style="margin-top: 28px"
      >
        <AddForm v-model:form-item="formItem" v-model:group-list="apiList"/>
      </n-form>
      <template #action>
        <n-button @click="pageNav.cancel">
          取消
        </n-button>
        <n-button type="primary" @click="submit">
          确认
        </n-button>
      </template>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import {
  searchOptions,
  searchForm,
  paginationReactive,
  formItem,
  originFormItem,
  formRules,
  createColumns
} from "@/view/open/app/data"
import {getList, config, del, changeStatus, getAppInfo} from "@/api/open/app"
import {useMessage} from "naive-ui"
import AddForm from "@/view/open/app/add-form.vue";

const message = useMessage()

const columns = createColumns({
  del: (row: any) => {
    del(row.id).then(response => {
      message.success(response.msg)
      getListData()
    })
  },
  edit: (row: any) => {
    pageNav.edit(row)
  },
  changeStatus: (row: any, status: number) => {
    changeStatus(status, row.id).then(response => {
      message.success(response.msg)
      getListData()
    })
  }
})
const apiList = reactive({
  info: []
})

const pageNav = reactive({
  show: false,
  add: () => {
    getAppInfo(0).then((res) => {
      apiList.info = res.data.apiList
      formItem.app_id = res.data.app_id
      formItem.app_secret = res.data.app_secret
      pageNav.show = true
    })
  },
  edit: (row: any) => {
    if (row.app_api == "") {
      row.app_api = []
    } else {
      row.app_api = row.app_api.split(',')
    }
    Object.assign(formItem, row)
    getAppInfo(row.id).then((res) => {
      apiList.info = res.data.apiList
      pageNav.show = true
    })
  },
  cancel: () => {
    pageNav.show = false
    Object.assign(formItem, originFormItem)
  }
})

const submit = () => {
  config(formItem).then(response => {
    message.success(response.msg)
    pageNav.cancel()
    getListData()
  })
}

const handleQuery = () => {
  paginationReactive.page = 1
  getListData()
}

const getListData = () => {
  getList({
    ...searchForm,
    page: paginationReactive.page,
    size: paginationReactive.size
  }).then((result) => {
    listData.value = result.data.list
    paginationReactive.total = result.data.count
  })
}

const listData = ref()

// 在组件挂载后执行的逻辑
onMounted(() => {
  getListData()
})
</script>
